import { NavBar, DatePicker } from "antd-mobile"
import { useMemo, useState } from "react"
import './index.scss'
import classNames from 'classnames'
import { useDate } from "@/hooks/useDate";
import { useYearBillList } from "@/hooks/useBillList";
import { transDateList, getMoenyCount } from "@/utils";
import TwoLineOverview from "@/components/TwoLineOverview";
import OneLineOverview from "@/components/OneLineOverview";
import dayjs from "dayjs";

const Year = () => {
  const { visible, date, onShowDate, onHideDate, onDateChange } = useDate()

  const selectedYear = date.year()

  const selectYearBills = useYearBillList(selectedYear)
  console.log(selectYearBills, 'selectYearBills');

  const yearBills = useMemo(() => {
    const pay = getMoenyCount(selectYearBills, 'pay')
    const income = getMoenyCount(selectYearBills, 'income')
    return { pay, income }
  }, [selectYearBills])

  const monthBills = useMemo(() => {
    const monthGroup = transDateList(selectYearBills, 'M')

    const billArr = []
    for (const key in monthGroup) {
      billArr.push({
        date: key,
        pay: getMoenyCount(monthGroup[key], 'pay'),
        income: getMoenyCount(monthGroup[key], 'income'),
      })
    }
    return billArr
  }, [selectYearBills])




  return (
    <div className="billDetail">
      <NavBar className="nav" backArrow={false} >
        <div className="nav-title" onClick={onShowDate}>
          {selectedYear}年
          <span className={classNames('arrow', visible && 'expand')}></span>
        </div>
      </NavBar>
      <DatePicker
        className="kaDate"
        title="记账日期"
        precision="year"
        visible={visible}
        onClose={onHideDate}
        max={new Date()}
        onConfirm={onDateChange}
      />

      <div className="content">
        <div className='overview'>
          <TwoLineOverview
            pay={yearBills?.pay}
            income={yearBills?.income}
            className="overview"
          />
        </div>
        {
          monthBills.map((item, index) => {
            return (
              <div className="monthBill" key={index}>
                <div className="date">{item.date}月</div>
                <OneLineOverview pay={item.pay} income={item.income} />
              </div>
            )
          })
        }
      </div>
    </div>
  )
}

export default Year